// @ts-ignore
import { React, useCallback, useEffect, useState } from 'react';
// @ts-ignore
import { Button, Space, Table } from 'antd';
// @ts-ignore
import type { TableProps } from 'antd';
// @ts-ignore
import { getCurrentUser, getOrderListInfo } from '@/services/ant-design-pro/api';
import { PageContainer } from '@ant-design/pro-components';
import { history } from '@umijs/max';
import OrderProductBox from './components/OrderProductBox';

interface DataType {
  orderId: string;
  userId: string;
  orderDate: string;
  //ship
  shipAddr1?: string;
  shipAddr2?: string;
  shipCity?: string;
  shipState?: string;
  shipZip?: string;
  shipCountry?: string;
  shipToFirstname?: string;
  shipToLastname?: string;

  //bill
  billAddr1: string;
  billAddr2: string;
  billCity: string;
  billState: string;
  billZip: string;
  billCountry: string;
  billToFirstname: string;
  billToLastname: string;

  courier: string;
  totalPrice: number;
  creditCard: string;
  exprDate: string;
  cardType: string;
  locale: string;
  orderLines: [
    {
      itemId: string;
      quantity: number;
    },
  ];
  lineNum: number;
  status: string;
}
//
const OrderTable: React.FC = () => {
  const [userOrderList, setUserOrderList] = useState<API.OrderList>({});
  const [currentUser, setCurrentUser] = useState<API.CurrentUser>({});

  const getUser = async () => {
    try {
      const res = await getCurrentUser();
      if (res.data) {
        setCurrentUser(res);
      }
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    if (localStorage.getItem('token')) {
      // @ts-ignore
      getUser(localStorage.getItem('token')).then();
    }
  }, []);

  const getUserOrderList = async () => {
    if (currentUser.data) {
      try {
        const res = await getOrderListInfo();
        console.log(res);
        if (res.data) {
          setUserOrderList(res);
        }
      } catch (error) {
        console.log(error);
      }
    }
  };
  useEffect(() => {
    getUserOrderList().then();
  }, [currentUser]);

  const listData = userOrderList.data;

  const clickForDetail = useCallback((id: string) => {
    history.push(`/book/detail/${id}`);
  }, []);

  // const clickForReturn = useCallback((id: number) => {
  //   history.push(`/book/detail/${id}`);
  // }, [])

  const columns: TableProps<DataType>['columns'] = [
    {
      title: '订单号',
      dataIndex: 'orderId',
      key: 'orderId',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '信用卡',
      dataIndex: 'creditCard',
      key: 'book_name',
    },
    {
      title: '货品数量',
      dataIndex: 'lineNum',
      key: 'orderId',
    },
    {
      title: '下单日期',
      dataIndex: 'orderDate',
      key: 'orderId',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <div
          style={{
            width: '200px',
          }}
        >
          <Space size="middle" style={{ marginRight: '20px' }}>
            <Button type={'primary'} onClick={() => clickForDetail(record.orderId)} ghost>
              查看详情
            </Button>
          </Space>

          <Space size="middle">
            <OrderProductBox orderLines={record.orderLines} />
          </Space>
        </div>
      ),
    },
  ];

  return (
    <PageContainer>
      {userOrderList && <Table columns={columns} dataSource={listData} />}
    </PageContainer>
  );
};

export default OrderTable;
